<#include "common/_layout.html"/>
<@layout>

<div class="typrography">
    <div class="container">
        <div class="grid_3 grid_4">
            <h3>Headings</h3>
            <div class="bs-example">
                <table class="table">
                    <tbody>
                    <tr>
                        <td><h3 >h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td>
                        <td class="type-info">Semibold 24px</td>
                    </tr>
                    <tr>
                        <td><h3 >h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td>
                        <td class="type-info">Semibold 24px</td>
                    </tr>
                    <tr>
                        <td><h3 >h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td>
                        <td class="type-info">Semibold 24px</td>
                    </tr>
                    <tr>
                        <td><h3 >h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td>
                        <td class="type-info">Semibold 24px</td>
                    </tr>
                    <tr>
                        <td><h3 >h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td>
                        <td class="type-info">Semibold 24px</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="grid_3 grid_5" style="text-align: center">
                    <ul class="pagination">
                        <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                    </ul>
            <div class="clearfix"> </div>
        </div>
        <div class="grid_3 grid_5">
            <h3>Breadcrumbs</h3>
            <ol class="breadcrumb">
                <li class="active">Home</li>
            </ol>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="active">Library</li>
            </ol>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active">Data</li>
            </ol>
        </div>
    </div>
</div>
</@layout>